<template>
	<view class="passwordLogin">
		<view class="title">
			密码登录
		</view>
		<view class="area">国家/地区 中国+86</view>
		<view class="phone">
			<input type="text" placeholder="请输入手机号">
		</view>
		<view class="password">密码</view>
		<view class="pasw">
			<input type="text" placeholder="请输入密码" v-model="phoneNum">
		</view>
		<view class="noteCode" @tap="goNoteLogin">用短信验证码登录 <van-icon name="arrow" /></view>
		<view class="loginBtn">登录</view>
		<view class="otherLogin">第三方账号登录</view>
		<view class="otherImg">
			<image src="../../static/img/weixin1.png"></image>
			<image src="../../static/img/qq1.png"></image>
		</view>
	</view>
</template>

<script>
	import utils from '../../components/utils/utils.js';
	export default {
		data() {
			return {
				phoneNum:''
			}
		},
		methods: {
			goNoteLogin(){
				uni.navigateTo({
					url:'/pages/noteLogin/noteLogin'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.passwordLogin{
	width: 100%;
	height: 100%;
	background-color: #fff;
	padding-left: 55rpx;
	box-sizing: border-box;
	.title{
		font-size:46rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:#333;
		margin-top:125rpx;
	}
	.area{
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:#666666;
		margin-top:85rpx;
	}
	.phone{
		width: 635rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #F2F2F2;
		line-height: 80rpx;
		padding-left:20rpx;
		input{
			margin-top: 40rpx;
			width: 100%;
			font-size: 32rpx;
			height: 100%;
			&:placeholder{
				font-size: 20rpx;
				color: #999;
			}
		}
	}
	.loginBtn{
		width:635rpx;
		background:#ED2C61;
		color:#fff;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		margin-top:80rpx;
	}
	.password{
		color:#333333;
		font-size: 32rpx;
		padding: 30rpx 0;
	}
	.pasw{
		width: 635rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #F2F2F2;
		line-height: 80rpx;
		padding-left:20rpx;
		input{
			width: 100%;
			font-size: 32rpx;
			height: 100%;
			&:placeholder{
				font-size: 20rpx;
				color: #999;
			}
		}
	}
	.noteCode{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(102,102,102,1);
		margin-top:30rpx;
	}
	.otherLogin{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
		margin-top:150rpx;
		width: 100%;
		text-align: center;
	}
	.otherImg{
		display: flex;
		justify-content: center;
		align-items: center;
		padding:15rpx;
		box-sizing: border-box;
		margin-top: 25rpx;
		image{
			width: 84rpx;
			height: 84rpx;
			border-radius: 50%;
			overflow: hidden;
			&:nth-child(1){
				margin-right: 90rpx;
			}
		}
	}
}
</style>
